<template>
  <div class="History">
    <h2>播放记录</h2>
    <ul>
      <li v-for="(el, index) in HistoryArr" :key="index">
        <router-link :to="'/detailAudio/' + el.dataType + '/' + el.audioId + '/' + el.playTime">
          {{ index + 1 }}.<span>{{ el.title }}</span>
          <p>播放到{{ el.playTime }}s--------------------{{ el.date }}</p>
        </router-link>
      </li>
    </ul>
  </div>
</template>
<script>
import { Toast } from "mint-ui";
export default {

  name: "HistoryCom",
  data() {
    return {
      userId: '',
      HistoryArr: []
    };
  },
  mounted() {
    const userInfo = this.$store.state.userInfo;
    if (userInfo) {
      this.userId = userInfo.id;
      this.$axios.get('getRecords?userId=' + this.userId).then(rs => {
        this.HistoryArr = rs.map(el => {
          let obj = {};
          obj.title = el.title;
          obj.playTime = el.playTime;
          obj.date = new Date(el.updatedAt).toLocaleDateString();
          obj.audioId = el.audioId;
          obj.id = el.id;
          obj.dataType = el.dataType;

          return obj;

        })
      })
    } else {
      this.$store.state.homeIndex = 'home5';
      this.$router.go('/home');
      Toast('请先登录')
    }
  },
  methods: {



  },
};
</script>
<style scoped lang="less">
.History {
  h2 {
    text-align: center;
  }

  ul {
    list-style: none;
    padding: 0;

    li {
      border-bottom: 1px solid #000;
      padding-top: 15px;
      padding-left: 40px;

      a,
      a:visited {
        text-decoration: none;
        color: rgb(51, 64, 64);

        &:hover {
          color: rgb(94, 224, 224);
        }
      }
    }
  }
}
</style>
